﻿@charset "utf-8";
/* CSS Document */
.inner{ background: url(../../../../images/bg_all_no.jpg) 0 0 no-repeat; position: relative;}
.header{ height: 132px; position: relative;}
.logo{width: 182px; padding-top: 32px; padding-left: 30px;}
.contact{position: absolute; background:#3fb3e5;top: 30px;right: 0; height: 72px; line-height: 72px; color: #fff;    padding: 0 20px;}
.contact:before{ position: absolute; content: ""; left: -36px;border-right: 36px solid #3fb3e5; border-top: 72px solid transparent;border-bottom: 0px solid transparent; position:absolute; right:392px;}
/*---------------------footer---------------------------*/
.footer{ position:absolute; bottom:20px; width:100%; height:80px;}
.footer input{ width:270px; height:80px; background-image:url(../../../../images/btn_sprite.png); background-repeat:no-repeat; border:none; border-radius:10px; margin:0 50px; font-size:30px; color:#fff;font-family: "Source Han Sans CN", "noto sans";}
.footer .exit{ background-position:center -3px;cursor:hand;}
.footer .back{ background-position:center -101px; position:absolute; right:0;cursor:hand;}
.timing{color:#fff;text-align:center;font-size:32px;position: absolute;top: 16px;width: 100%;}

.contentbox{ position:relative;}
.mainbox{ position:relative; top: 110px;margin:0 auto;width:1000px;height:600px; background:rgba(255,255,255,0.3);}
.maintit{ text-align: center; font-size: 36px;padding: 50px 0; color: #ff0;}

/*--------------------------bar开始-----------------------*/
.bar{ position: absolute;overflow:hidden;width: 100%;}
.bar ul{width:1000px; height:50px; margin:30px auto 0;background-image:url(../../../../images/barbg.png); background-repeat:no-repeat; }
.bar li{ float:left;width:288.3px; padding-left:45px; font-size:24px; height:50px; line-height:45px;color: #c6c6c6;}
.bar .complete{ color:#fff;}
.bar2 ul{ background-position: center -56px;}
.bar3 ul{ background-position: center -102px;}
.bar4 ul{background-position: center -153px;}
/*--------------------------result开始-----------------------*/
.result {
    padding-top: 160px;
    overflow: hidden;
    text-align: center;
    color: #fff;
}

.result h3 {
    font-size: 40px;
    margin-bottom: 50px;
}

.result p {
    font-size: 30px;
    margin-bottom: 30px;
}


.leftbox{ width: 38.2%;height: 100%; float: left; display: table;}
.leftcon{ display: table-cell; vertical-align: middle;padding: 0 36px; line-height: 1.5; color: #fff;}
.leftit{ font-size: 36px; margin-bottom: 30px; display: block;}
.rightbox{ width: 61.8%; height: 100%;float: right; position: relative;background:center center no-repeat rgba(0,0,0,0.4);}
.checkbtn{position: absolute; bottom: 40px; width: 100%; text-align: center;}
.checkbtn input{ border-radius: 36px; height: 72px; width: 160px; font-size: 24px; border: none; color:#fff; margin: 0 30px;}
.resetphoto{ background: #9a9a9a;}
.checkphoto{ background: #d23d4e;}

/*-----------------------------------------realname--------------------------------------------*/
.div-headicon{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -279px;
    margin-left: -309px;
    width:618px;
    height:558px;
}
.photo-canvas{display: none;}